<template>
    <div class="app-card">
        <el-card class="el-card-style">
            <!-- 操作按钮区域 -->
            <div>
                <div>
                    <!-- :disabled="addEditDisabled" -->
                    <el-button
                        type="primary"
                        :icon="Plus"
                        @click="addEditBtn"
                    >
                        添加
                    </el-button>
                    <!-- :disabled="downloadDisabled" -->
                    <el-button
                        type="success"
                        :icon="Download"
                        @click="download"
                    >
                        下载Excel
                    </el-button>
                </div>
            </div>

            <table-panel
                style="margin-top: 10px;"
                :loading="tablePanelConfig.loading"
                :tableData="tablePanelConfig.tableData"
                :height="tablePanelConfig.height"
                :columns="tablePanelConfig.columns"
                :columnMinWidth="tablePanelConfig.columnMinWidth"
                :total="tablePanelConfig.total"
                :currentPage="tablePanelConfig.currentPage"
                :pageCount="tablePanelConfig.pageCount"
                @handleCurrentChange="handleCurrentChange"
            />
        </el-card>

        <!-- 添加/编辑弹窗 -->
         <add-edit-dialog
            ref="addEditDialog"
            @sucess="init"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Plus,
    Download
} from '@element-plus/icons-vue'
import TablePanel from '@/components/company/TablePanel.vue'
import AddEditDialog from '@/views/company/entryEmploymentInformation/components/AddEditDialog.vue'
import http from '@/api/http'
import * as XLSX from 'xlsx'
import store from '@/store/index'

// 变量
const tablePanelConfig = ref(
    {
        loading: false,
        tableData: [],
        height: 'calc(100vh - 240px)',
        columns: [
            {
                label: '姓名',
                prop: '姓名'
            },
            {
                label: '性别',
                prop: '性别'
            },
            {
                label: '身份证号',
                prop: '身份证号'
            },
            {
                label: '出生年份',
                prop: '出生年份'
            },
            {
                label: '出生月份',
                prop: '出生月份'
            },
            {
                label: '出生日期',
                prop: '出生日期'
            },
            {
                label: '籍贯国',
                prop: '籍贯国'
            },
            {
                label: '籍贯省',
                prop: '籍贯省'
            },
            {
                label: '籍贯市',
                prop: '籍贯市'
            },
            {
                label: '入职学历',
                prop: '入职学历'
            },
            {
                label: '招聘属性',
                prop: '招聘属性'
            },
            {
                label: '目标工位',
                prop: '目标工位'
            },
            {
                label: '人员号',
                prop: '人员号'
            },
            {
                label: '工号',
                prop: '工号'
            },
            {
                label: '设置人',
                prop: '设置人'
            },
            {
                label: '设置时间',
                prop: '设置时间'
            },
            {
                label: '自动别名',
                prop: '自动别名'
            },
            {
                label: '同名人数',
                prop: '同名人数'
            },
            {
                label: '分类号',
                prop: '分类号'
            },
            {
                label: '分类名',
                prop: '分类名'
            },
            {
                label: '初审人',
                prop: '初审人'
            },
            {
                label: '初审时间',
                prop: '初审时间'
            },
            {
                label: '期望月薪',
                prop: '期望月薪'
            },
            {
                label: '确认月薪',
                prop: '确认月薪'
            },
            {
                label: '终审人',
                prop: '终审人'
            },
            {
                label: '终审时间',
                prop: '终审时间'
            },
            {
                label: '旺店SN码',
                prop: '旺店SN码'
            },
            {
                label: '旺店仓库',
                prop: '旺店仓库'
            },
            {
                label: '旺店商家编码',
                prop: '旺店商家编码'
            },
            {
                label: '旺店提交时间',
                prop: '旺店提交时间'
            },
            {
                label: '旺店提交要求',
                prop: '旺店提交要求'
            },
            {
                label: '旺店货品编码',
                prop: '旺店货品编码'
            }
        ],
        columnMinWidth: '110',
        total: 0,
        currentPage: 1,
        pageCount: 1
    }
)

const addEditDialog = ref(null)
const addEditDisabled = ref(true)
const downloadDisabled = ref(true)

// 函数
onMounted(() => {
    buttonPermission()
    init()
})

// 判断此用户的按钮权限
function buttonPermission() {
    const result = (store.state.permission || []).find((x) => {
      return x.url === '/entry-employment-information'
    })
    if (result) {
        addEditDisabled.value = !result.permission.includes('Add')
        downloadDisabled.value = !result.permission.includes('Export')
    }
}

function init() {
    tablePanelConfig.value.loading = true
    http.get(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hmc/pagin?p=${tablePanelConfig.value.currentPage}`).then(res => {
        if (res) {
            tablePanelConfig.value.tableData = res.data.ret
            tablePanelConfig.value.total = res.data.totalCount
            if (tablePanelConfig.value.currentPage === 1) {
                tablePanelConfig.value.pageCount = Math.ceil(res.data.totalCount / res.data.countPerPage)
            }
            tablePanelConfig.value.loading = false
        }
    }).catch(error => {
        console.log(error)
        tablePanelConfig.value.loading = false
    })
}

function handleCurrentChange(val) {
    tablePanelConfig.value.currentPage = val
    init()
}

function addEditBtn() {
    addEditDialog.value.open()
}

function download() {
    if (tablePanelConfig.value.tableData.length === 0) return
    let tHeader = []
    for (const item of tablePanelConfig.value.columns) {
        tHeader.push(item.label)
    }
    const data = [tHeader]
    for (const i in tablePanelConfig.value.tableData) {
        const row = tablePanelConfig.value.tableData[i]
        data.push([
            row['姓名'],
            row['性别'],
            row['身份证号'],
            row['出生年份'],
            row['出生月份'],
            row['出生日期'],
            row['籍贯国'],
            row['籍贯省'],
            row['籍贯市'],
            row['入职学历'],
            row['招聘属性'],
            row['目标工位'],
            row['人员号'],
            row['工号'],
            row['设置人'],
            row['设置时间'],
            row['自动别名'],
            row['同名人数'],
            row['分类号'],
            row['分类名'],
            row['初审人'],
            row['初审时间'],
            row['期望月薪'],
            row['确认月薪'],
            row['终审人'],
            row['终审时间'],
            row['旺店SN码'],
            row['旺店仓库'],
            row['旺店商家编码'],
            row['旺店提交时间'],
            row['旺店提交要求'],
            row['旺店货品编码']
        ])
    }
    const ws = XLSX.utils.aoa_to_sheet(data)       // 将数据转换为工作表
	const wb = XLSX.utils.book_new()               // 创建工作簿
	XLSX.utils.book_append_sheet(wb, ws, "sheet1") // 添加工作表
	XLSX.writeFile(wb, `入职信息.xlsx`); 
}
</script>

<style lang="less" scoped>
.app-card {
    width: 100%;
    height: calc(100vh - 95px);
    padding: 5px;
}

.el-card-style {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
